import React from 'react';
import classnames from 'classnames';
import {
  Input,
  Form,
} from 'antd';
import { SearchOutlined } from '@ant-design/icons';

import styles from './index.module.less';

const { TextArea } = Input;

const InputCom = React.forwardRef(({
  label,
  name,
  initialValue,
  disabled,
  required,
  rules,
  search,
  placeholder,
  isTextArea,
  className,
  style,
  onChange,
  ...props
}, ref) => (
  <div className={classnames(styles.root, className)} style={style}>
    <div style={{ marginRight: '12px', whiteSpace: 'nowrap' }}>
      {label}
    </div>
    {isTextArea
      ? (
        <Form.Item name={name} initialValue={initialValue} rules={rules || []}>
          <TextArea
            ref={ref}
            maxLength={255}
            className={styles.textArea}
            disabled={!!disabled}
            onChange={onChange}
            {...props}
          />
        </Form.Item>
      )
      : (
        <Form.Item required={required} name={name} initialValue={initialValue} style={{ marginBottom: '12px' }} rules={rules || []}>
          <Input
            maxLength={128}
            onChange={onChange}
            suffix={search && <SearchOutlined style={{ color: '#99ACC5' }} />}
            placeholder={placeholder}
            disabled={!!disabled}
            {...props}
            ref={ref}
          />
        </Form.Item>
      )
    }
  </div>
));

export default InputCom;
